﻿<!DOCTYPE html>
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <!-- Basic Page Needs
      ================================================== -->
    <meta charset="utf-8">
    <title>Shopholic</title>
    <!-- SEO Meta
      ================================================== -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="distribution" content="global">
    <meta name="revisit-after" content="2 Days">
    <meta name="robots" content="ALL">
    <meta name="rating" content="8 YEARS">
    <meta name="Language" content="en-us">
    <meta name="GOOGLEBOT" content="NOARCHIVE">
    <!-- Mobile Specific Metas
      ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- CSS
      ================================================== -->
    <link rel="stylesheet" type="text/css" href="css/custom.css?v=1.3">
    <link rel="stylesheet" type="text/css" href="css/responsive.css?v=1.3">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js" type="text/javascript"></script>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<style type="text/css">

    body:hover {
        cursor: pointer;
    }

    #nav {
        margin: 10px auto;
        width: 800px;
        clear: both;
    }

    .line {
        background-color: #a7cbff;
        height: 3px;
    }

    #ord a, .layui-tab-title li a {
        text-decoration: none;
        color: #1965b3;
    }

    a:hover {
        color: #0000FF;
        text-decoration: none;
    }

    .layui-tab-title li a {
        font-size: 20px;
        line-height: 30px;
        font-weight: 300;
    }

    .OrderTb td a {
        font-size: 12px;
        line-height: 20px;
        color: #1965b3;
    }


    .OrderTb th {
        text-align: center;
    }

    #ord img {
        border: 0px;
        vertical-align: middle;
    }

    .cart_td_2,
    .cart_td_3,
    .cart_td_4,
    .cart_td_5,
    .cart_td_6,
    .cart_td_8 {
        background-color: #e2f2ff;
        border-bottom: solid 1px #d1ecff;
        border-top: solid 1px #d1ecff;
        text-align: center;
        padding: 5px;
    }


    .cart_td_3,
    .cart_td_4,
    .cart_td_5,
    .cart_td_6 {
        border-right: solid 1px #FFF;
    }

    .cart_td_3 {
        text-align: left;
    }

    .cart_td_4 {
        font-weight: bold;
    }

    .shopInfo {
        text-align: left;
        font-size: 12px;
        line-height: 20px;
    }
</style>
<body>
<div class="se-pre-con"></div>
<div class="main">

    <!-- HEADER START -->
    <script src="js/head.js"></script>
    <!-- HEADER END -->

    <!-- Bread Crumb STRAT -->
    <div class="banner inner-banner1">
        <div class="container">
            <section class="banner-detail center-xs">
                <h1 class="banner-title">Account</h1>
                <div class="bread-crumb right-side float-none-xs">
                    <ul>
                        <li><a href="index.html"><i class="fa fa-home"></i>Home</a>/</li>
                        <li><span>Account</span></li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    <!-- Bread Crumb END -->

    <!-- CONTAIN START -->
    <section class="checkout-section ptb-60">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div class="account-sidebar account-tab mb-sm-30">
                        <div class="tab-title-bg">
                            <div class="heading-part">
                                <div class="sub-title"><span></span> My Account</div>
                            </div>
                        </div>
                        <div class="account-tab-inner">
                            <ul class="account-tab-stap">

                                <li id="step2"><a href="javascript:void(0)">Account Details<i
                                        class="fa fa-angle-right"></i> </a></li>
                                <li id="step3"><a href="javascript:void(0)">My Order List<i
                                        class="fa fa-angle-right"></i> </a></li>
                                <li id="step4"><a href="javascript:void(0)">Change Password<i
                                        class="fa fa-angle-right"></i> </a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div id="data-step2" class="account-content" data-temp="tabdata">
                        <div class="row">
                            <div class="col-12">
                                <div class="heading-part heading-bg mb-30">
                                    <h2 class="heading m-0">Account Details</h2>
                                </div>
                            </div>
                        </div>
                        <div class="m-0">
                            <form class="main-form full">
                                <div class="mb-20">
                                    <div class="row">
                                        <div class="col-12 mb-20">
                                            <div class="heading-part">
                                                <h3 class="sub-heading">详情信息</h3>
                                            </div>
                                            <hr>
                                        </div>
                                        <div id="add">

                                        </div>
                                        <!-- <div class="col-md-6">
                                           真实姓名: <input type="text" value="${user.userName}">
                                         </div>
                                         <div class="col-md-6">
                                           邮箱: <input type="text" value="${user.email}">
                                         </div>
                                         <div class="col-md-6">
                                           手机号: <input type="text" value="${user.userTel}">
                                         </div>
                                         <div class="col-md-6">
                                           地址: <input type="text" value="${user.address}">
                                         </div>-->
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div id="data-step3" class="account-content" data-temp="tabdata" style="display:none">
                        <div id="form-print" class="admission-form-wrapper">
                            <div class="row">
                                <div class="col-12">
                                    <div class="heading-part heading-bg mb-30">
                                        <h2 class="heading m-0">My Orders</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 mb-xs-30">
                                    <div class="cart-item-table commun-table">
                                        <div class="table-responsive">
                                            <ul class="layui-tab-title">
                                                <li class="layui-this" lay-id="11">
                                                    <a id="MyOrder" class="orderMsg">所有订单</a>
                                                </li>
                                                <li lay-id="22">
                                                    <a id="unPaid" class="orderMsg">未支付</a>
                                                </li>
                                                <li lay-id="33">
                                                    <a id="noBuyerOrder" class="orderMsg">未收货</a>
                                                </li>
                                                <li lay-id="44">
                                                    <a id="BuyerOrder" class="orderMsg">已收货</a>
                                                </li>
                                                <li lay-id="55">
                                                    <a id="SellerOrder" class="orderMsg">卖出</a>
                                                </li>
                                            </ul>
                                            <div id="ord" style="text-align: center">
                                                <table width="100%" border="0" cellspacing="0" cellpadding="0"
                                                       id="shopping" class="OrderTb">
                                                    <tr>
                                                        <th style="line-height: 25px;" colspan="2">宝贝</th>
                                                        <th width="100px">&ensp;单价</th>
                                                        <th width="100px">数量</th>
                                                        <th width="120px">实付款</th>
                                                        <th width="100px">交易操作</th>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="6" class="line"></td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="print-btn text-center mt-30">
                                    <button onclick="printDiv('form-print')" class="btn btn-color" type="button">Print
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="data-step4" class="account-content" data-temp="tabdata" style="display:none">
                        <div class="row">
                            <div class="col-12">
                                <div class="heading-part heading-bg mb-30">
                                    <h2 class="heading m-0">Change Password</h2>
                                </div>
                            </div>
                        </div>
                        <form class="main-form full">
                            <div class="row">
                                <div class="col-12">
                                    <div class="input-box">
                                        <label for="old-pass">Old-Password</label>
                                        <input type="password" placeholder="Old Password" required id="old-pass">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="input-box">
                                        <label for="login-pass">Password</label>
                                        <input type="password" placeholder="Enter your Password" required
                                               id="login-pass">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="input-box">
                                        <label for="re-enter-pass">Re-enter Password</label>
                                        <input type="password" placeholder="Re-enter your Password" required
                                               id="re-enter-pass">
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button class="btn-color" type="submit" name="submit">Change Password</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- CONTAINER END -->

    <!-- FOOTER START -->
    <script src="js/foot.js"></script>
    <!-- FOOTER END -->
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.downCount.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/fotorama.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/common.js"></script>
</body>
<script src="/layui/layui.all.js" charset="utf-8"></script>
<script>
    $(function () {
        $.ajax({
            url: "user/ShowUserOneServlet",
            type: "post",
            dataType: "json",
            success: function (data) {
                if (data != null) {
                    $div = "<div class='col-md-6'>\n" +
                        "                      真实姓名: <input type=\"text\" value='" + data.userName + "'>\n" +
                        "                    </div>\n" +
                        "                    <div class='col-md-6'>\n" +
                        "                      邮箱: <input type=\"text\" value='" + data.email + "'>\n" +
                        "                    </div>\n" +
                        "                    <div class='col-md-6'>\n" +
                        "                      手机号: <input type=\"text\" value='" + data.userTel + "'>\n" +
                        "                    </div>\n" +
                        "                    <div class='col-md-6'>\n" +
                        "                      地址: <input type=\"text\" value='" + data.address + "'>\n" +
                        "                    </div> "
                    $("#add").append($div);
                } else {
                  window.location.href="/index.html";
                }
            }
        })
    })

    var flag = 1;
    var state;
    var getOrderServlet;
    var opera;

    $(function () {
        opera = function (obj, orderId) {
            console.log(orderId);
            var op = $(obj).attr("id");
            if (op == "delOrder") {
                layer.confirm('真的删除此订单么?', {
                        btn: ['确定', '取消'],
                        shade: false,
                        closeBtn: 0
                    },

                    function () {
                        layer.close(layer.index);
                        var operationServlet = "DelOrderServlet";
                        operation(operationServlet, orderId, obj)
                    }
                );
            }
            if (op == "confOrder") {
                layer.confirm('确认收货吗?', {
                        btn: ['确定', '取消'],
                        shade: false,
                        closeBtn: 0
                    },

                    function () {
                        layer.close(layer.index);
                        var operationServlet = "EndOrderServlet";
                        operation(operationServlet, orderId, obj);
                    }
                );
            }
            var operation = function (operationServlet, orderId, obj) {
                console.log(operationServlet);
                console.log(orderId);
                console.log(obj);
                $.ajax({
                    url: operationServlet,
                    type: "post",
                    data: {
                        "orderId": orderId,
                        "state": 2
                    },
                    success: function (data) {
                        console.log(data);
                        console.log(typeof data);
                        if (operationServlet == "DelOrderServlet") {
                            if (data == "true") {
                                $(obj).parent().parent().prev().remove(); //删除前一tr
                                $(obj).parent().parent().remove(); //删除当前tr
                            } else {
                                alert("删除失败")
                            }

                        } else {
                            if (data == "true") {
                                $(obj).parent().parent().prev().remove(); //删除前一tr
                                $(obj).parent().parent().remove(); //删除当前tr
                            } else {
                                alert("失败!")
                            }
                        }

                    }
                })
            }
        }

        var getOrderList = function (getOrderServlet, state, flag) {
            console.log(getOrderServlet)
            $.ajax({
                url: getOrderServlet || "SelMyOrderServlet",
                type: "post",
                dataType: "json",
                data: {
                    "state": state
                },
                success: function (data) {
                    $(".OrderTb").find("tr[class='orderdata']").remove();

                    if (flag == 1) {
                        $.each(data, function (index, obj) {
                            console.log(obj);
                            var ms;
                            if (obj.state == 0) {
                                ms = '未支付'
                            } else if (obj.state == 1) {
                                ms = '未交易'
                            } else if (obj.state == 2) {
                                ms = '已交易'
                            }
                            var $ordertr =
                                "<tr class='orderdata'>" +
                                "<td colspan='2' class='shopInfo'>订单时间:" + obj.orderTime + "<br/>订单编号:" + obj.orderNum + "</td>" +
                                "<td colspan='2'>卖家：<a href='#'>" + obj.seller.userName + "</a></td>" +
                                "<td colspan='2'><img src='images/taobao_relation.jpg' alt='relation'/</td>" +
                                "</tr>" +
                                "<tr class='orderdata'>" +
                                "<td class='cart_td_2'><img src = 'goodsimage/" + obj.goods.image + "' href=''  alt='shopping'/></td>" +
                                "<td class='cart_td_3'><a target='_blank' href='/product-page.html?goodsId=" + obj.goods.goodsId + "'>" + obj.goods.goodsContent + "</a><br/>保障：<img src='images/taobao_icon_01.jpg' alt='icon'/></td> " +
                                "<td class='cart_td_4'>" + obj.goods.price + "</td>" +
                                "<td class='cart_td_5'>" + obj.sellNum + "</td>" +
                                "<td class='cart_td_6'>" + obj.totalPrice + "</td>" +
                                "<td class='cart_td_8'><span id='sp'>" + ms + "</span></td>" +
                                "</tr>";

                            $(".OrderTb").append($ordertr)
                        });
                    }
                    if (flag == 2) {
                        $.each(data, function (index, obj) {
                            var $ordertr =
                                "<tr class='orderdata'>" +
                                "<td colspan='2' class='shopInfo'>订单时间:" + obj.orderTime + "<br/>订单编号:" + obj.orderNum + "</td>" +
                                "<td colspan='2'>卖家：<a href='#'>" + obj.seller.userName + "</a></td>" +
                                "<td colspan='2'><img src='images/taobao_relation.jpg' alt='relation'/</td>" +
                                "</tr>" +
                                "<tr class='orderdata'>" +
                                "<td class='cart_td_2'><img src = 'goodsimage/" + obj.goods.image + "' alt='shopping'/></td>" +
                                "<td class='cart_td_3'><a target='_blank' href='/product-page.html?goodsId=" + obj.goods.goodsId + "'>" + obj.goods.goodsContent + "</a><br/>保障：<img src='images/taobao_icon_01.jpg' alt='icon'/></td> " +
                                "<td class='cart_td_4'>" + obj.goods.price + "</td>" +
                                "<td class='cart_td_5'>" + obj.sellNum + "</td>" +
                                "<td class='cart_td_6'>" + obj.totalPrice + "</td>" +
                                "<td class='cart_td_8'><a id='confOrder' onclick='opera(this," + obj.orderId + ")'>确认收货</a></td>" +
                                "</tr>";
                            $(".OrderTb").append($ordertr)
                        });
                    }
                    if (flag == 3) {
                        $.each(data, function (index, obj) {
                            var $ordertr =
                                "<tr class='orderdata'>" +
                                "<td colspan='2' class='shopInfo'>订单时间:" + obj.orderTime + "<br/>订单编号:" + obj.orderNum + "</td>" +
                                "<td colspan='2'>卖家：<a target='_blank' href='/product-page.html?goodsId=" + obj.goods.goodsId + "'>" + obj.seller.userName + "</a></td>" +
                                "<td colspan='2'><img src='images/taobao_relation.jpg' alt='relation'/</td>" +
                                "</tr>" +
                                "<tr class='orderdata'>" +
                                "<td class='cart_td_2'><img src = 'goodsimage/" + obj.goods.image + "' alt='shopping'/></td>" +
                                "<td class='cart_td_3'><a href='#'>" + obj.goods.goodsContent + "</a><br/>保障：<img src='images/taobao_icon_01.jpg' alt='icon'/></td> " +
                                "<td class='cart_td_4'>" + obj.goods.price + "</td>" +
                                "<td class='cart_td_5'>" + obj.sellNum + "</td>" +
                                "<td class='cart_td_6'>" + obj.totalPrice + "</td>" +
                                "<td class='cart_td_8'><a id='delOrder' onclick='opera(this," + obj.orderId + ")'>删除</a></td>" +
                                "</tr>";
                            $(".OrderTb").append($ordertr);

                        });
                    }
                    if (flag == 4) {
                        $.each(data, function (index, obj) {
                            var $ordertr =
                                "<tr class='orderdata'>" +
                                "<td colspan='2' class='shopInfo'>订单时间:" + obj.orderTime + "<br/>订单编号:" + obj.orderNum + "</td>" +
                                "<td colspan='2'>卖家：<a href='#'>" + obj.seller.userName + "</a></td>" +
                                "<td colspan='2'><img src='images/taobao_relation.jpg' alt='relation'/</td>" +
                                "</tr>" +
                                "<tr class='orderdata'>" +
                                "<td class='cart_td_2'><img src = 'goodsimage/" + obj.goods.image + "' alt='shopping'/></td>" +
                                "<td class='cart_td_3'><a target='_blank' href='/product-page.html?goodsId=" + obj.goods.goodsId + "'>" + obj.goods.goodsContent + "</a><br/>保障：<img src='images/taobao_icon_01.jpg' alt='icon'/></td> " +
                                "<td class='cart_td_4'>" + obj.goods.price + "</td>" +
                                "<td class='cart_td_5'>" + obj.sellNum + "</td>" +
                                "<td class='cart_td_6'>" + obj.totalPrice + "</td>" +
                                "<td class='cart_td_8'><a href='/Alipay?orderNum=" + obj.orderNum + "&totalPrice=" + obj.totalPrice + "&goodsName=" + obj.goods.goodsName + "'>支付</a></td>" +
                                "</tr>";
                            $(".OrderTb").append($ordertr)
                        });
                    }
                }
            })
        }
        $(".orderMsg").click(function () {
            var action = $(this).attr("id");
            if (action == "MyOrder") {
                getOrderServlet = "SelMyOrderServlet";
                flag = 1;
                getOrderList(getOrderServlet, null, flag)
            }
            if (action == "unPaid") {
                getOrderServlet = "SelBuyerOrderServlet";
                state = 0;
                flag = 4;
                getOrderList(getOrderServlet, state, flag)
            }
            if (action == "noBuyerOrder") {
                getOrderServlet = "SelBuyerOrderServlet";
                state = 1;
                flag = 2;
                getOrderList(getOrderServlet, state, flag)
            }
            if (action == "BuyerOrder") {
                getOrderServlet = "SelBuyerOrderServlet";
                state = 2;
                flag = 3;
                getOrderList(getOrderServlet, state, flag)
            }

            if (action == "SellerOrder") {
                getOrderServlet = "SelSellerOrderServlet";
                flag = 1;
                getOrderList(getOrderServlet, state, flag)
            }
        })


        getOrderList(getOrderServlet, null, flag)

    })

</script>

</html>
